import React, {Component} from 'react';
import {Grid,Button,Dialog,Input} from '@icedesign/base';
import FoundationSymbol from 'foundation-symbol';
import Ellipsis from '@icedesign/ellipsis';

const {Row, Col} = Grid;
/**
*  选择图标
*/
export default class SelectIcon extends Component{
  constructor(props) {
     super(props);
     this.state = {
       visible: false,
       selectIcon:'',
       value:''
     }
  }

  //初始化
  componentWillMount(){
    this.setState({
      selectIcon:this.props.icon != undefined?this.props.icon:'',
      value:this.props.icon != undefined?this.props.icon:''
    });
  }

  onOpen = () => {
    this.setState({
      visible: true,
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
    })
  };

  onOk = () => {
    if(this.state.selectIcon == ''){
      Feedback.toast.prompt("请选择菜单");
      return;
    }
    this.setState({
      value:this.state.selectIcon
    });
    //回调函数
    this.props.renderFun(this.state.selectIcon);
    this.onClose();
  }

  render(){
    return(
      <div>
        <Row justify='center'>
          <Col s='9' xxs='6' className="add-user-label">图标：</Col>
          <Col s='15' xxs='18' onClick={this.onOpen}>
              <Input size="large" disabled={true} value={this.state.value} placeholder="" />
          </Col>
        </Row>
        <Dialog
          visible={this.state.visible}
          onOk={this.onOk}
          onCancel={this.onClose}
          onClose={this.onClose}
          title="菜单选择"
          className="select-icon-dialog"
        >
          <Row wrap={true} gutter={20}>
            {
              all.map((icon,key) => (
                <Col s='6' xxs='8' key={key}
                  style={{margin:'5px 0',cursor: 'pointer'}}
                  onClick={() => this.setState({selectIcon:icon})}
                  >
                  {
                    this.state.selectIcon === icon?
                      <span style={{color:'#1573ff',cursor: 'pointer'}}>
                        <FoundationSymbol style={{
                            margin:'5px 0',
                            cursor: 'pointer'
                          }} type={icon} />
                        <Ellipsis className="select-icon-style" style={{
                            color:'#1573ff',
                          }} lineLimit={1} text={icon} />
                      </span>
                    :
                      <span style={{cursor: 'pointer'}}>
                        <FoundationSymbol style={{
                            margin:'5px 0',
                          }} type={icon} />
                        <Ellipsis className="select-icon-style" lineLimit={1} text={icon} />
                      </span>
                  }
                </Col>
              ))
            }
          </Row>
        </Dialog>
      </div>
    )
  }
}

//图标数据
const all = [
  'bangzhu',
  'cascades',
  'home2',
  'activity',
  'qrcode',
  'light',
  'link',
  'copy',
  'creative',
  'phone',
  'angle-down',
  'edit',
  'hourglass',
  'coupons',
  'repair',
  'shopcar',
  'cross',
  'clock',
  'search',
  'message',
  'exchange',
  'delete',
  'angle-up',
  'redpacket',
  'speaker',
  'transfer-left',
  'transfer-right',
  'customize',
  'down',
  'publish',
  'attachment',
  'eye',
  'location',
  'backward',
  'forward',
  'rmb',
  'notice',
  'yonghu',
  'shop',
  'fans2',
  'chart',
  'lock',
  'code',
  'horn',
  'home',
  'bell',
  'person',
  'bold',
  'background-color',
  'font-color',
  'underline',
  'italics',
  'font-size',
  'ol-list',
  'align-center',
  'align-flex',
  'float-full',
  'float-left',
  'quote',
  'align-right',
  'align-left',
  'ul-list',
  'store',
  'topic',
  'anchor',
  'video',
  'sucai',
  'picture',
  'gif',
  'task',
  'guanbi',
  'question',
  'mail',
  'image',
  'question2',
  'key',
  'content',
  'edit2',
  'menu',
  'collapse',
  'correct',
  'directory',
  'fans',
  'compass',
  'quote2',
  'gif2',
  'pin',
  'video2',
  'item',
  'material',
  'shezhi',
  'skin_light',
  'requ'
];
